<template>
  <a-modal
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    fullscreen
  >
    <template #title> 审核组配置 </template>
    <a-steps :current="current" @change="setCurrent">
      <a-step>基本信息</a-step>
      <a-step>配置审核组</a-step>
    </a-steps>
    <!-- <a-divider /> -->

    <div v-if="current === 1" class="index">
      <a-form :model="form.data" ref="refForm" :rules="rules" auto-label-width>
        <a-form-item label="审核组名称" field="name" show-colon>
          <a-input v-model="form.data.name"></a-input>
        </a-form-item>
      </a-form>
    </div>

    <div v-if="current === 2" class="index">
      <a-transfer
        :data="data"
        v-model:modelValue="form.data.flowStaffIds"
        :title="['数据源', '对象']"
      >
      </a-transfer>
    </div>

    <template #footer>
      <div class="modal-footer">
        <a-space size="large" align="center">
          <a-button type="secondary" :disabled="current <= 1" @click="onPrev">
            <IconLeft />
            上一步
          </a-button>
          <a-button
            type="primary"
            v-show="current !== 2"
            :disabled="current >= 2"
            @click="onNext"
          >
            下一步
            <IconRight />
          </a-button>
          <a-button type="primary" v-show="current === 2" @click="save">
            保存
          </a-button>
        </a-space>
      </div>
    </template>
  </a-modal>
  <!-- <SelectPersonnel
    v-if="selectModVisible"
    v-model:visible="selectModVisible"
    @selectUser="getSelectUser"
  /> -->
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect, nextTick } from 'vue';
  import { GetPersonnelinformation } from '@/api/home/System settings/personal-information/index';
  import { cloneDeep } from 'lodash';

  const data = ref([]);
  const userData = async () => {
    const res = await GetPersonnelinformation({
      page: 1,
      size: -1,
    });
    console.log(res);
    data.value = res.content.data.map((item: any) => {
      return {
        ...item,
        value: item.id,
        label: item.name,
      };
    });
    console.log(data.value);
  };
  userData();

  const current = ref(1);
  const refForm = ref();

  const props = withDefaults(
    defineProps<{
      visible: boolean;
      formData: any;
      title: string;
    }>(),
    {
      visible: false,
      title: '新增审核组',
    }
  );

  const emit = defineEmits(['update:visible', 'addAuditTeam']);
  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });
  const form = reactive({
    data: {
      name: '',
      flowStaffIds: [],
    },
  });

  const rules = reactive({
    name: [
      {
        required: true,
        message: '请输入审核组名称',
      },
    ],
  });

  const onPrev = () => {
    current.value = Math.max(1, current.value - 1);
  };
  const onNext = async () => {
    if (current.value === 1) {
      const checkTab1 = await refForm.value.validate();
      console.log(checkTab1);
      if (checkTab1) return;
    }
    current.value = Math.min(2, current.value + 1);
  };

  const setCurrent = async (n: number) => {
    if (current.value === 1) {
      const checkTab1 = await refForm.value.validate();
      if (checkTab1) return;
    }
    current.value = n;
  };

  const handleCancel = () => {
    // refForm.value.resetFields();
    form.data = {
      name: '',
      flowStaffIds: [],
    };
    modalVisible.value = false;
  };

  const save = () => {
    if (!form.data.id) {
      emit('addAuditTeam', cloneDeep(form.data));
    } else {
      emit('addAuditTeam', cloneDeep(form.data));
    }
    handleCancel();
  };

  // const delReviewedNode = (index: number) => {
  //   form.value.flowStaffIds.splice(index, 1);
  // };

  // // 取消
  // const handleCancel = () => {
  //   modalVisible.value = false;
  // };

  // const addReviewedNode = () => {
  //   selectModVisible.value = true;
  // };

  // const getSelectUser = (data: any) => {
  //   form.value.flowStaffIds = data;
  // };

  // const getUserName = (id: number) => {
  //   const data = GetStaffData.value.filter((i) => i.id === id);
  //   return data[0].name;
  //   // if (typeof id === 'string') return;
  // };

  // const handleOk = () => {
  //   emit('addAuditTeam', form.value);
  //   modalVisible.value = false;
  // };

  watchEffect(() => {
    if (modalVisible.value) {
      form.data = props.formData;
      console.log(2, form.data);

      // console.log(form.value.flowStaffIds.map(Number));
      // form.value.flowStaffIds = form.value.flowStaffIds.map(Number);
      // console.log(props.formData);
    }
  });
</script>

<style scoped lang="less">
  .items {
    padding-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .buttonNode {
    text-align: right;
  }
  .Node-title {
    justify-content: space-between;
    width: 100%;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 4px;
    // -moz-box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.349019607843137);
    // -webkit-box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.349019607843137);
    // box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.34);
  }
  .modal-footer {
    display: flex;
    justify-content: center;
  }

  .index {
    width: 800px;
    margin: 70px auto;
    display: flex;
    justify-content: center;
  }
</style>
